<template>
  <!--   充值提现设置-->
  <a-table :data-source="tableData" :loading="loading" :columns="tableColumn" :scroll="{x:1300}"
           :pagination="pagination">
    <template #status="{record}">
      <a-switch :checked="record.status === 1" @change="changeStatus(record)"></a-switch>
    </template>
    <template #operation="{record}">
      <a-button type="link" @click="editTransaction(record)">{{ $t('编辑') }}</a-button>
    </template>
  </a-table>
  <a-modal v-model:visible="visible.isShow"
           :confirm-loading="confirmLoading"
           :title="visible.title" @ok="confirm()" :after-close="clearForm">
    <a-form label-align="left" :rules="formRules" :model="form" ref="formRef">
      <a-form-item :label="$t('交易类型')" name="channelType">
        <a-select v-model:value="form.channelType" :disabled="visible.type === 'edit'">
          <a-select-option :value="2">{{ $t('充值') }}</a-select-option>
          <a-select-option :value="3">{{ $t('提现') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('转账方式')" name="onlineType">
        <a-select v-model:value="form.onlineType" :disabled="visible.type === 'edit'">
          <a-select-option :value="0">{{ $t('线上') }}</a-select-option>
          <a-select-option :value="1">{{ $t('线下') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('手续费')" name="singleFee" style="display: flex">
        <a-input style="width:150px" v-model:value="form.singleFee" :suffix=" '/' +  $t('笔')"/>
        <span style="margin: 0 10px">+</span>
        <a-input style="width:150px" v-model:value="form.ratioFee" :suffix="'‰' + '/' + $t('笔')"/>
      </a-form-item>
      <a-form-item :label="$t('扣费方式')" name="deductionType">
        <a-radio-group v-model:value="form.deductionType" :disabled="form.channelType === 2">
          <a-radio :value="0">{{ $t('金额中扣除') }}</a-radio>
          <a-radio :value="1">{{ $t('另计') }}</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {reactive, toRefs, ref, onMounted, computed} from 'vue'
import {fetchPayList, addPay, updatePay} from "../../../../api/merchant";
import i18n from "../../../../locale";
import {useRoute} from 'vue-router'
import {message, Modal} from "ant-design-vue";

const $t = i18n.global.t
const tableColumn = [
  {
    title: $t('交易类型'), dataIndex: 'channelType', width: 150, align: 'center', customRender: ({text}) => {
      return text === 2 ? $t('充值') : text === 3 ? $t('提现') : ''
    }
  },
  {
    title: $t('转账方式'), dataIndex: 'onlineType', width: 100, align: 'center', customRender: ({text}) => {
      return text === 0 ? $t('线上') : $t('线下')
    }
  },
  {
    title: $t('扣费方式'), dataIndex: 'deductionType', width: 100, align: 'center', customRender: ({text}) => {
      return text === 1 ? $t('另计') : $t('金额中扣除')
    }
  },
  {
    title: $t('手续费'), dataIndex: 'singleFee', width: 100, align: 'center', customRender: ({text, record}) => {
      const {singleFee, ratioFee} = record
      return singleFee + '/笔' + '+' + ratioFee + '‰/笔'
    }
  },
  {title: $t('备注'), dataIndex: 'describe', width: 100, align: 'center'},
  {title: $t('修改时间'), dataIndex: 'updateTime', width: 150, align: 'center'},
  {title: $t('操作'), width: 100, align: 'center', fixed: 'right', slots: {customRender: 'operation',}},
]
export default {
  name: "transactionConfig",
  setup() {
    const formRef = ref(null)
    const routes = useRoute()
    const {id} = routes.query
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        channelType: 2,
        mchId: parseInt(id)
      },
      visible: {
        isShow: false,
        title: '',
        type: ''
      },
      loading: false,
      form: {
        feeType: 1,
        type: null,
        name: null,
        payType: null,
      },
      formRules: {
        onlineType: [
          {required: true, message: $t('请选择'), trigger: 'change', type: 'number'},
        ],
        channelType: [
          {required: true, message: $t('请选择'), trigger: 'change', type: 'number'},
        ],
        payType: [
          {required: true, message: $t('请选择'), trigger: 'change', type: 'number'},
        ],
        deductionType: [
          {required: true, message: $t('请选择'), trigger: 'change', type: 'number'},
        ],
        singleFee: [
          {
            required: true, validator: (rule, value) => {
              const {singleFee, ratioFee} = state.form
              if (singleFee === '' && ratioFee === '') {
                return Promise.reject($t('不能为空'))
              } else if (!/^[+-]?(0|([1-9]\d*))(\.\d+)?$/.test(singleFee) || !/^[+-]?(0|([1-9]\d*))(\.\d+)?$/.test(ratioFee) || (parseFloat(ratioFee) >= 1000 || parseFloat(ratioFee) < 0)) {
                return Promise.reject($t('手续费格式错误'))
              }
              return Promise.resolve()
            }, trigger: 'blur'
          },
        ],
      },
      tableData: [],
      confirmLoading: false
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + $t('条'),
      onChange: (page) => {
        state.page.pageNum = page
        methods.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        methods.getTableData()
      }
    }))
    const methods = {
      async getTableData() {
        state.loading = true
        const res = await fetchPayList(state.page)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
          state.loading = false
        }
      },
      addTransaction() {
        state.visible = {
          isShow: true,
          type: 'add',
          title: $t('添加充值提现设置')
        }
      },
      changeStatus({id, status, mchId}) {
        Modal.confirm({
          title: $t('确认进行此操作') + '?',
          async onOk() {
            const res = await updatePay({id, status: status === 1 ? 0 : 1, mchId,})
            if (res.code === 200) {
              message.success($t('操作成功'))
              methods.getTableData()
            }
          },
        });
      },
      editTransaction(row) {
        state.visible = {
          isShow: true,
          type: 'edit',
          title: $t('编辑充值提现设置')
        }
        state.form = {
          ...row,
          fee: row.fee + ''
        }
      },
      clearForm() {
        state.form = {
          feeType: 1
        }
        formRef.value.resetFields()
      },
      confirm() {
        formRef.value.validate().then(async () => {
          const params = {
            ...state.form,
            mchId: id,
            singleFee: parseFloat(state.form.singleFee),
            ratioFee: parseFloat(state.form.ratioFee)
          }
          state.confirmLoading = true
          const api = ((params) => state.visible.type === 'add' ? addPay(params) : updatePay(params))
          const res = await api(params)
          if (res.code === 200) {
            state.visible.isShow = false
            message.success(state.visible.type === 'add' ? $t('添加成功') : $t('编辑成功'))
            methods.getTableData()
          }
          state.confirmLoading = false
        })
      }
    }
    onMounted(() => {
      methods.getTableData()
    })
    return {
      pagination,
      tableColumn,
      formRef,
      ...toRefs(state),
      ...methods,
    }
  }
}
</script>

<style scoped>

</style>
